import { View } from "@tarojs/components";

import "./recommmend.scss";
import { useEffect, useState } from "react";
import request from "@/utils/request.js";
import CustomTabBar  from "@/component/CustomTabBar";
import {
  VirtualList,
  Image,
  Divider,
} from "@nutui/nutui-react-taro";
import { useReady } from "@tarojs/taro";
import { IconFont } from "@nutui/icons-react-taro";
import Taro from "@tarojs/taro";



definePageConfig({
  navigationStyle: "custom",
});
export default function Recommend() {
  useEffect(() => {
    // getActType()
  });
  useReady(() => {
    getActType();
    getActList();
  });
  const [typeList, setTypeList] = useState([{ id: 0, name: "全部" }]);
  const [activeTab, setActiveTab] = useState<string | number>(0);
  const [actList, setActList] = useState([]);
  const getActType = () => {
    request({ url: "api/social/activity/typeList" }).then((res) => {
      setTypeList(typeList.concat(res.data.typeList));
    });
  };

  const getActList = () => {
    request({
      url: "api/social/activity/recommend",
      data: {
        type: "1",
        province: "广东省",
        city: "广州市",
        current: 1,
        size: 10,
        startDate: "2024-12-04",
        endDate: "2025-01-01",
      },
    }).then((res) => {
      setActList(res.data.items);
    });
  };

  const onScroll = () => {
    console.log("滚动");
  };
  const tabClick=(index)=>{
    setActiveTab(index);
  }
  const navInfo=(activityId)=>{
    Taro.navigateTo({
      url: `/activity/actInfo?activityId=${activityId}`,
    });
  }
  const itemRender = (item) => {
    return ( 
          <View className="card" onClick={()=>navInfo(item.activityId)}>
            <Image
              src={item.coverUrl}
              mode="scaleToFill"
              width={177}
              height={228}
              radius={6}
            ></Image>
            <View className="title">{item.title}</View>
            <View className="durationTime"><IconFont fontClassName="icon-time" classPrefix="iconfont" color="#9C9EAC" size={16}/>10.15 18:00-22:00</View>
            <View style={{display:'flex',justifyContent:'flex-start'}}>
            { item.tags && item.tags.map((tag, index) => {
               return(
                <View className="tags" key={index}>{tag}</View>
               )
           })}
            </View>
            <View className="ticketsPrice">
              <View className="price">¥10</View>
              <View className="tickets">{item.member||0}/{item.maxNumOfPeople}</View>
            </View>
          </View>
   
    );
  };

  return (
    <View>
      <View className="top">
        <View className="navigationBar">
          <View className="address">
            <IconFont fontClassName="icon-dingwei" classPrefix="iconfont" color="#2A2B30" size={22}/>
          广州
          <IconFont fontClassName="icon-xia1" classPrefix="iconfont" color="#2A2B30" size={16 }/>
          </View>
          <View className="middle">
            <View>活动</View>
            <View>社群</View>
            <View>空间</View>
          </View>
          <View className="search"><IconFont fontClassName="icon-sousuo" classPrefix="iconfont" color="#ec6138" size={30}/></View>
        </View>
        <Divider/>
        <View className="tabs">  {typeList.map((item, index) => {
            return <View key={index} className={`tab-item ${index === activeTab ? 'active' : ''}`} onClick={()=>{tabClick(index)}}>{item.name}</View>;
          })}</View>
      </View>
      {/* <View className="tabs">
        <Tabs
          value={tabvalue}
          activeType="simple"
          defaultValue="全部"
          align="left"
          style={{
            // @ts-ignore
            "--nutui-tabs-titles-font-size": "24rpx",
            "--nutui-tabs-titles-item-color": "#676978",
            "--nutui-tabs-titles-item-active-color": "#EC6138",
            "--nutui-tabs-titles-item-active-font-size": "24rpx",
            "--nutui-tabs-titles-item-active-font-weight": "bold",
          }}
          onChange={(value) => {
            setTabvalue(value);
          }}
        >
          {typeList.map((item, index) => {
            return <Tabs.TabPane key={index} title={item.name}></Tabs.TabPane>;
          })}
        </Tabs>
      </View> */}
      <VirtualList
        list={actList}
        onScroll={onScroll}
        itemHeight={350}
        itemRender={itemRender}
        // overscan={4}
        // style={{
        //   display: "flex",
        //   flexWrap: "wrap",
        //   justifyContent: "space-between",
        // }}
      >
      </VirtualList>
      <CustomTabBar/>
    </View>
  );
}
